$controls-height: 28px;
$controls-margin: 5px;
$controls-dropdown-top: $controls-height + $controls-margin;

%box {
	@include box-sizing(border-box);
	overflow: hidden;
	border: none;
	background-color:#eee;
	padding: 2px 4px;
	border: 1px solid #ccc;
	box-shadow: 0 1px 3px -2px hsl(0, 0%, 7%), inset 0 2px 5px 0 hsla(0, 100%, 100%, 0.3);
	-webkit-box-shadow: 0 1px 3px -2px hsl(0, 0%, 7%), inset 0 2px 5px 0 hsla(0, 100%, 100%, 0.3);
	height: $controls-height;
}

%btn {
	@extend %box;
	cursor: pointer;
	&:hover, &:focus {
		background-color: #ddd;
	}
	&:active, &.active {
		box-shadow: inset 0 1px 2px 0 hsla(0, 0%, 0%, 0.2);
		-webkit-box-shadow: inset 0 1px 2px 0 hsla(0, 0%, 0%, 0.2);
		background-color: #ddd;
	}
	&[disabled] {
		color: gray;
		&:hover, &:focus, &:active, &.active {
			background-color:#eee;
			box-shadow: 0 1px 3px -2px hsl(0, 0%, 7%), inset 0 2px 5px 0 hsla(0, 100%, 100%, 0.3);
			-webkit-box-shadow: 0 1px 3px -2px hsl(0, 0%, 7%), inset 0 2px 5px 0 hsla(0, 100%, 100%, 0.3);
			cursor: default;
		}
	}
	min-width: $controls-height;
	line-height: $controls-height/2;
}

.drawing-board-controls {
	margin: 0 auto;
	text-align: center;
	font-size: 0;
	display: table;
	border-spacing: $controls-height/3 0;
	position: relative;
	&[data-align="left"] {
		margin: 0;
		left: -$controls-height/3;
	}
	&[data-align="right"] {
		margin: 0 0 0 auto;
		right: -$controls-height/3;
	}
	.drawing-board-canvas-wrapper + &, & + .drawing-board-canvas-wrapper {
		margin-top: $controls-margin;
	}
	min-height: $controls-height;
}

.drawing-board-controls-hidden {
	@extend .drawing-board-utils-hidden;
	height: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 0;
}

.drawing-board-control {
	display: table-cell;
	border-collapse: separate;
	vertical-align: middle;
	font-size: 16px;
	height: 100%;
}

.drawing-board-control-inner {
	position: relative;
	height: 100%;
	@include box-sizing(border-box);
}

.drawing-board-control > button {
	@extend %btn;
	margin: 0;
	vertical-align: middle;
}